<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h1>{{ msg }}</h1>
      <jack></jack>
    </div>
		<!-- 父子组件都有钩子函数 执行顺序是什么
			1. 父组件创建前
			2. 父组件创建后
			3. 父组件挂载前
			4. 子组件创建前  子组件创建后 子组件挂载前 子组件挂载后
			5. 父组件的挂载后
			-->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      Vue.component('jack', {
        template: `
          <div>我是jack组件 {{sonmsg}} <button @click="sonmsg = 222">change</button> </div>
        `,
				data(){
					return {
						sonmsg: 111
					}
				},
        beforeCreate () {
          console.log('jack beforeCreate')
        },
        created () {
          // 这里面一般发送请求
          console.log('jack created')
        },
        beforeMount () {
          console.log('jack beforeMount')
        },
        mounted () {
          console.log('jack mounted')
        },
        beforeUpdate () {
          console.log('jack beforeUpdate')
        },
        updated () {
          console.log('jack updated')
        },
        beforeDestroy () {
          console.log('jack beforeDestroy')
        },
        destroyed () {
          console.log('jack destroyed')
        }
      })

      // 八大生命周期函数: 这些生命周期函数, 会在vue的生命周期的不同阶段, 会自动被vue调用
      const vm = new Vue({
        el: '#app',
        data: {
          msg: 'hello vue',
          list: []
        },
        beforeCreate () {
          console.log('vm - beforeCreate')
        },
        created () {
          console.log('vm - created')
        },
        beforeMount () {
          console.log('vm - beforeMount')
        },
        mounted () {
          console.log('vm - mounted')
        },
        beforeUpdate () {
          console.log('vm - beforeUpdate')
        },
        updated () {
          console.log('vm - updated')
        },
        beforeDestroy () {
          console.log('vm - beforeDestroy')
        },
        destroyed () {
          console.log('vm - destroyed')
        }
      })
    </script>
  </body>
</html>